<template>
    <div class="qiamnDaoMian">

        <div class="qianTop">
            <div>幸运抽奖</div>
            <div>LUCKY DRAW</div>
        </div>
        <div class="mainBox">
            <img src="../assets/jiang/boxBorder.png" class="borImg">
            <div class="innerBox">
                <img src="../assets/jiang/left.png" alt="">
                <div>{{ userInfo.name }}</div>
                <img src="../assets/jiang/right.png" alt="">
            </div>
        </div>

        <!-- 开始抽奖 按钮 -->
        <img src="../assets/jiang/btn.png" class="jiangBtn" alt="" @click="selectHandle" v-if="!startFlag">
        <img src="../assets/jiang/stopBtn.png" class="jiangBtn" alt="" @click="selectHandle" v-else>
        <!-- 开始抽奖 按钮 结束 -->

        <!-- 中奖弹窗 开始 -->
        <div class="diaBox" v-if="showFlag">
            <div class="userBox">
                <div class="boxTop">中奖用户</div>
                <div class="userImg">
                    <!-- <img src="../assets/advisory_img1.png" class="imgBox" alt=""> -->
                    <div class="imgBox">{{ userInfo.name.slice(0, 1) }}</div>
                    <div>{{ userInfo.name }}</div>
                </div>
                <div class="userInfo">
                    <div v-if="sexFlag">
                        <span>性别</span>
                        <span>{{ userInfo.sex }}</span>
                    </div>
                    <div v-if="telFlag">
                        <span>电话</span>
                        <span>{{ userInfo.tel }}</span>
                    </div>
                    <div v-if="companyFlag">
                        <span>公司</span>
                        <span>{{ userInfo.company }}</span>
                    </div>
                    <div v-if="positionFlag">
                        <span>职位</span>
                        <span>{{ userInfo.position }}</span>
                    </div>
                </div>
                <div class="btnBox">
                    <div @click="goHandle">继续抽奖</div>
                    <div @click="endHandle">结束抽奖</div>
                </div>
            </div>

        </div>

        <!-- 中奖弹窗 结束 -->
    </div>
</template>


<script>
export default {
    name: 'jiang',
    data() {
        return {
            showFlag: false,
            userInfo: {
                name: "请开始",
            },
            randomList: [],
            hisList: localStorage.getHisList == undefined
                ? []
                : JSON.parse(localStorage.getHisList),
            startFlag: false,
            showLoad: '',
            form: {},
            showFlag: false,
            nameFlag: false,
            telFlag: false,
            sexFlag: false,
            companyFlag: false,
            positionFlag: false,
        };
    },
    created() {
        if (localStorage.form != undefined) {
            this.form = JSON.parse(localStorage.form);

            console.log(this.form.signatureFlag);
            var str = this.form.signatureFlag
            console.log(str);
            this.nameFlag = str.indexOf('姓名') != -1
            this.telFlag = str.indexOf('电话') != -1
            this.sexFlag = str.indexOf('性别') != -1
            this.companyFlag = str.indexOf('公司') != -1
            this.positionFlag = str.indexOf('职位') != -1

            console.log(this.nameFlag);
            console.log(this.telFlag);
            console.log(this.sexFlag);
            console.log(this.companyFlag);
            console.log(this.positionFlag);

        }
        if (localStorage.signUserList != undefined) {
            this.randomList = JSON.parse(localStorage.signUserList);
        }
        console.log(this.randomList);
    },
    methods: {
        // 开始
        selectHandle() {
            if (this.randomList.length == 0) {
                this.$message.warning('请先进行签到')
                return
            }
            var _this = this;
            console.log(this.startFlag);
            if (!this.startFlag) {
                this.showFlag = false;
                this.userInfo = {};
                this.startFlag = true;
                _this.showLoad = setInterval(function () {
                    var index = Math.floor(Math.random() * _this.randomList.length);
                    _this.userInfo = _this.randomList[index];
                }, 20);
            }
            else {
                clearInterval(_this.showLoad);
                _this.showFlag = true;
                _this.startFlag = false;
                var index = Math.floor(Math.random() * _this.randomList.length);
                _this.userInfo = _this.randomList[index];
                // _this.userInfo.nowTime = _this.currentTime();
                _this.hisList.push(_this.userInfo);
                localStorage.getHisList = JSON.stringify(_this.hisList);
                console.log(_this.userInfo);
            }
        },
        // 继续抽奖
        goHandle() {
            this.showFlag = false
            this.startFlag = false
            this.selectHandle()
        },
        // 结束抽奖
        endHandle() {
            this.showFlag = false
            this.startFlag = false
            this.userInfo = {
                name: '请选择'
            }
        },
        /**
       * 获取当前时间
       */
        currentTime() {
            var date = new Date();
            var year = date.getFullYear();
            var dateArr = [
                date.getMonth() + 1,
                date.getDate(),
            ];
            return year +
                "-" +
                dateArr[0] +
                "-" +
                dateArr[1];
        },
    },
}
</script>
<style lang="less" scoped>
.qiamnDaoMian {
    padding: 40px 0 20px 50px;
    background-color: #E8EDFF;
    height: 100%;

    .qianTop {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        padding-bottom: 10px;
        font-size: 40px;
        font-family: FZZongYi-M05S;
        font-weight: bold;
        color: #4F50DE;

        >div:first-child {
            margin-bottom: 3px;
            cursor: pointer;
        }

        >div:nth-child(2) {
            font-size: 18px;
        }
    }

    ::-webkit-scrollbar {
        display: none;
    }
}

.mainBox {
    position: relative;
    top: 0px;
    margin: 10px auto;
    width: 100%;
    height: 550px;
    border: 30px solid #8BA4FF;
    background: linear-gradient(90deg, #4F4FDE, #7B98FF);
    box-shadow: 0px 2px 3px 0px rgba(94, 94, 95, 0.28);
    opacity: 0.8;
    border-radius: 30px;
    transform: scale(.8);
}

.borImg {
    position: absolute;
    top: -45px;
    left: -44px;
    width: 1628px;
    height: 640px;
}


.innerBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    font-size: 84px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #4F50DE;
}

.innerBox>img {
    margin: 0 190px;
    width: 131px;
    height: 64px;
}

.innerBox>div {
    width: 300px;
    // background-color: #4F4FDE;
    text-align: center;
}

.jiangBtn {
    position: relative;
    top: -50px;
    display: block;
    margin: 20px auto;
    width: 552px;
    height: 216px;
    transform: scale(.6);
    z-index: 10;
    cursor: pointer;
}

.diaBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 20;

}

.userBox {
    position: relative;
    top: -20px;
    left: 50px;
    padding-bottom: 50px;
    width: 540px;
    background: #FFFFFF;
    border-radius: 18px 18px 16px 16px;
    box-shadow: 1px 10px 10px rgba(94, 94, 95, 0.28);
}

.boxTop {
    width: 540px;
    height: 69px;
    background: #7273E5;
    border-radius: 16px 16px 0px 0px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 69px;
    text-align: center;
}

.userImg {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    border-bottom: 14px solid #fafafa;
}

.imgBox {
    margin-bottom: 14px;
    width: 102px;
    height: 102px;
    line-height: 102px;
    text-align: center;
    border-radius: 50%;
    background-color: #F9CD92;
    color: #fff;
    font-size: 42px;
    font-weight: bold;
}

.userInfo {
    width: 100%;
}

.userInfo>div {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 24px 56px;
    width: 100%;
    border-bottom: 2px solid #f2f2f2;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
}

.userInfo>div:last-child {
    border-bottom: 0px;
}

.userInfo>div>span:last-child {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.btnBox {
    padding: 10px 68px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btnBox>div {
    width: 145px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    border: 2px solid #7273E5;
    border-radius: 24px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #7273E5;
    cursor: pointer;
}

.btnBox>div:first-child {
    background-color: #7273E5;
    color: #FFFFFF;
}
</style>